<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item>主页</a-breadcrumb-item>
      <a-breadcrumb-item>用户管理</a-breadcrumb-item>
      <a-breadcrumb-item>用户列表</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card>
      <a-table
        :columns="columns"
        :rowKey="record => record.id"
        :dataSource="userList"
        :pagination= false>
        <template slot="mg_state" slot-scope="scope">
<!--          {{scope}}-->
          <a-switch :checked="scope.mg_state" @change="value => handleChange(value, scope)"/>
        </template>
        <template slot="action" slot-scope="action">
<!--          {{action}}-->
          <a-button type="primary" icon="edit"></a-button>
          <a-button type="danger" icon="delete" @click="del(action.id)"></a-button>
          <a-button type="default" icon="setting"></a-button>
        </template>
      </a-table>
      <a-pagination showQuickJumper :defaultCurrent="1" :total="500" @change="onChange"/>
    </a-card>
  </div>
</template>

<script>
const columns = [ {
  title: '姓名',
  dataIndex: 'username'
}, {
  title: '邮箱',
  dataIndex: 'email'
}, {
  title: '电话',
  dataIndex: 'mobile'
}, {
  title: '角色',
  dataIndex: 'role_name'
}, {
  title: '状态',
  scopedSlots: { customRender: 'mg_state' }
}, {
  title: '操作',
  scopedSlots: { customRender: 'action' }
}]
export default {
  data () {
    return {
      userList: [],
      requestParams: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      columns: columns,
      rowKey: ''
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    // 获取用户列表
    async getUserList () {
      let res = await this.$http.get(`users`, { params: this.requestParams })
      console.log(res)
      if (res.data.meta.status !== 200) return this.$message.error(res.data.meta.msg)
      this.userList = res.data.data.users
      // console.log(this.userList)
    },
    // 用户状态开关
    async handleChange (flag, params) {
      // console.log(flag, params)
      let res = await this.$http.put(`users/${params.id}/state/${flag}`)
      // console.log(res)
      if (res.data.meta.status !== 200) {
        return this.$message.error(res.data.meta.msg)
      }
      this.getUserList()
    },
    // 删除用户
    del (id) {
      console.log(id)
    },
    // 分页跳转
    onChange () {

    }
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin-top: 20px;
  background-color: #fff;
}
.ant-btn {
  margin-right: 10px;
}
.ant-pagination {
  margin-top: 20px;
}
</style>
